<template>
	<div class="carbon">
	    <div class="iData">
	      <topData />
	    </div>
	    <div class="eData">
	      <centerData />
	    </div>
	    <div class="tanpai">
	      <bottomData />
	    </div>
	  </div>
</template>

<script>
	  import topData from './libs/top.vue';
	  import centerData from './libs/center.vue';
	  import bottomData from './libs/bottom.vue';
	  export default {
		  data(){
			  return {
				  
			  }
		  },
		  components:{
			topData,
			centerData,
			bottomData
		  }
	  }
</script>

<style lang="less" scoped>
	.carbon {
	  height: 100%;
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  
	  .iData {
	    height: 25%;
	  }
	  .eData {
	    margin-top: 10px;
	    height: 32%;
	    margin-bottom: 20px;
	  }
	 
	  .tanpai {
	    height: calc(46% - 10px - 20px - 20px);
	  }
		
		.edhengxian {
			position: relative;
			width: 96%;
			height: 1px;
			margin: 0 auto;
			background-color: rgba(255, 255, 255, 0.3);
		}
		
		.edhengxian::before {
			position: absolute;
			top: -2px;
			left: 0;
			background-color: #94f2ff;
			box-shadow: 0px 0px 5px 1px #e5e9e7;
			content: '';
			height: 4px;
			width: 30px;
			border-radius: 1px;
			z-index: 2;
		}
		
		.edhengxian::after {
			position: absolute;
			top: -1px;
			right: 0;
			background-color: #76828f;
			opacity: 1;
			content: '';
			height: 3px;
			width: 15px;
			z-index: 2;
		}
	}
</style>